<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>搜索界面</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			body {
				height: 3000px;
				background-color: lightgoldenrodyellow;
			}
			
			#form {
				width: 600px;
				margin: 100px auto;
			}
			
			#form #d #d2 {
				float: left;
				border: 2px solid #3ca8f7;
			}
			
			#form #d #d2 #searchFrame {
				height: 33px;
				width: 390px;
				margin-right: 0;
			}
			
			#form #d #d3 {
				float: left;
			}
			
			#form #d #d3 #searchButton {
				height: 37px;
				width: 100px;
				margin-left: 0;
				background-color: #3ca8f7;
				border-color: #3ca8f7;
				font-size: 16px;
				color: #FFFFFF;
			}
			
			#form #d #d4 #searchButton {
				height: 37px;
				width: 100px;
			}
			
			.clear:after {
				content: '';
				display: block;
				clear: both;
			}
		</style>
		<script type="text/javascript">
			function copy() {
				var form = document.getElementById("form");
				var d = document.getElementById("d4");
				var clone = form.cloneNode(true);
				d.appendChild(clone);
				d.style.position = "fixed"
				d.style.top = "-70px"
				clone.style.margin = "0";
				d.style.margin = "auto";
				d.style.width = "100%";
				d.style.height = "70px"
				clone.style.margin = "auto";
				clone.style.marginTop = "18px";
				clone.style.marginBottom="20px";
				d.style.backgroundColor = "white";
			}
			window.onscroll = function() {
				var stop = document.documentElement.scrollTop || document.body.scrollTop;
				var form = document.getElementById("form");
				var distance = form.getBoundingClientRect().top;
				var d = document.getElementById("d4");
				if(stop >= distance) {
					d.style.transitionProperty="all";
					d.style.transitionDuration="0.1s";
					d.style.transitionTimingFunction="linear";
					d.style.transform="translateY(70px)"
				}else{
					d.style.transitionProperty="all";
					d.style.transitionDuration="0.1s";
					d.style.transitionTimingFunction="linear";
					d.style.transform="translateY(-70px)"
				}
			}
		</script>
	</head>

	<body onload="copy()">
		<form action="https://www.baidu.com/" method="post" id="form">
			<div id="d" class="clear">
				<div id="d2">
					<input type="search" name="searchFrame" id="searchFrame" />
				</div>
				<div id="d3">
					<input type="submit" name="searchButton" id="searchButton" value="搜索" />
				</div>
			</div>
		</form>
		<div id="d4">

		</div>
	</body>

</html>
